<template>
	<div class="deposit-result-gb-bind px-[25px] md:px-[35px] pt-4 pb-10">
		<div>
			<span>请您在</span>
			<span class="text-danger">
				{{ format(setSeconds(0, countdown), 'mm:ss') }}
			</span>
			<span>内, 使用</span>
			<span class="text-danger">购宝钱包</span>
			<span>扫码来完成绑定。</span>
		</div>
		<div class="h-1" />
		<div class="text-sm text-t-2">请先绑定您的 【购宝钱包】账户，然后使用 【G 币】进行存款。</div>
		<div class="h-[25px]" />
		<div class="text-sm text-t-2">1. 请在手机上打开 【购宝钱包】 APP；</div>
		<div class="h-1" />
		<div class="text-sm text-t-2">2. 点击【扫描二维码】图标；</div>
		<div class="h-1" />
		<div class="text-sm text-t-2">3. 扫描下方的【二维码】完成绑定。</div>
		<div class="h-[25px]" />
		<div class="flex justify-center items-center h-[150px]">
			<div class="w-[150px] h-[150px] p-[6px] bg-white rounded-sm">
				<n-qr-code
					id="deposit-CNY_GB-bind"
					:value="result?.cnyGbCode"
					:size="138"
					type="svg"
					class="!p-0" />
			</div>
		</div>
		<div class="h-4" />
		<div class="text-center">
			<BaseButton
				class="h-10"
				type="primary"
				:block="false"
				textT="下载图片"
				@click="toImage('deposit-CNY_GB-bind')" />
		</div>
		<div class="h-[25px]" />
		<div class="flex rounded-lg bg-bg-2 p-3">
			<div class="flex justify-center items-center h-[100px] mr-3">
				<BaseLoadingCircle v-if="false" />
				<div v-else class="w-[100px] h-[100px] p-1 bg-white rounded-sm">
					<n-qr-code :value="result?.cnyGbAppLink" :size="92" type="svg" class="!p-0" />
				</div>
			</div>
			<div>
				<div>还没有【购宝钱包】账户吗？</div>
				<div class="h-2" />
				<div class="ml-1 text-sm text-t-2">1. 请扫描左方二维码来立即下载 【购宝钱包】 APP。</div>
				<div class="ml-1 text-sm text-t-2">2. 注册一个新的【购宝钱包】账户。</div>
			</div>
		</div>
		<div class="h-[25px]" />
		<BaseButton type="primary" textT="我已按照提示完成绑定" :loading="loadingGB" @click="onClick" />
		<div class="h-4" />
		<div class="flex justify-center">
			<span
				class="text-center text-sm text-primary app-text-react"
				@click="showWarning($t('app.todo'))">
				查看下载和存款教程
			</span>
		</div>
	</div>
	<BasePopupSmall v-model="bindSuccess" titleT="绑定成功">
		<div class="my-[25px] text-t-2">
			恭喜,您已成功绑定了【购宝钱包】账户{{ encryptAddress(data?.address) }}。
		</div>
		<BaseButton type="primary" textT="action.close" :loading="loading" @click="onSubmit" />
	</BasePopupSmall>
	<BasePopupSmall v-model="bindFailed" titleT="绑定失败">
		<div class="my-[25px] text-t-2">
			<span>抱歉,您未能成功绑定【购宝钱包】账户,如需帮助请</span>
			<span class="text-primary app-text-react" @click="customerService()">联系客服</span>
			<span>。</span>
		</div>
		<BaseButton type="primary" textT="action.close" @click="bindFailed = false" />
	</BasePopupSmall>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { format, setSeconds } from 'date-fns'
import { NQrCode } from 'naive-ui'
import { useWalletStore } from '@/store'
import { customerService, encryptAddress, showWarning, toImage } from '@/utils'
import { BaseButton, BaseLoadingCircle, BasePopupSmall } from '@/components/base'
import { useCountdown, useRequest } from '@/hooks'
import { submitFiatDeposit, validationCnyGb } from '@/api/wallet.ts'

const walletStore = useWalletStore()
const bindSuccess = ref(false)
const bindFailed = ref(false)
const result = computed(() => walletStore.submitFiatDepositResult)
const { countdown, reset } = useCountdown()
reset(300)

const onClick = async () => {
	// 校验是否绑定成功, 弹窗提示成功与否
	await runGB()
}

const {
	run: runGB,
	loading: loadingGB,
	data
} = useRequest<{ userId: number; bindState: boolean; address: string }>(validationCnyGb, {
	onSuccess: (data: any) => {
		// {
		// 	"userId": 10021,
		// 	"bindState": true,
		// 	"address": "6749d412fd8af9286ff79f0e"
		// }
		if (data?.bindState) {
			bindSuccess.value = true
		} else {
			bindFailed.value = true
		}
	}
})
const { run, loading } = useRequest(submitFiatDeposit, {
	showError: true,
	showSuccess: true,
	onSuccess: (data: any) => {
		bindSuccess.value = false
		walletStore.submitFiatDepositResult = data
		walletStore.show.submitFiatDepositResult = true
		walletStore.setWalletDepositShow(false)
	}
})

const onSubmit = () => {
	run({ ...walletStore.submitFiatDepositParams })
}
</script>

<style scoped></style>
